<template>
  <div>
    <div style="width: 100%; height: 300px;">
      <div id="touchkit"></div>
    </div>
    <div v-on:click="addBackgroundFunc('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F28%2F02%2F47%2Fpic_lib%2Fs960x639%2FWebshot_08s960x639.jpg&refer=http%3A%2F%2Fimg.article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614870790&t=6cb519db7483edd2259aa9f866fa6df7')">添加背景</div>
    <div v-on:click="addImageFunc('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg')">添加元素</div>
  </div>
</template>

<script>
  import {VueExtend} from 'godspen-lib'
  import Touchkit from 'touchkit'

  export default {
    mixins: [VueExtend.mixin],
    name: 'touchkit',
    label: process.env.LABEL,
    style: process.env.STYLE,
    stack: null, // 是否是堆叠模式 ，false：孩子元素会按楼层一个个向下排布， true: 孩子元素绝对定位，随意放置位置
    childLimit: 9999,  // 孩子元素最大限制数
    leaf: true, // 是否是叶子节点，为true的时候该节点下面不能添加节点
    props: {
    },
    data () {
      return {
        touchKit: null
      }
    },
    mounted () {
      if (!this.touchKit) {
        this.touchKit = new Touchkit('#touchkit')
        console.log('初始化组件：', this.touchKit)
      }
    },
    computed: {
    },
    editorMethods: {
    },
    methods: {
      addBackgroundFunc (image) {
        console.log('背景图片：', image)
        this.touchKit.background({
          image: image,
          type: 'contain'
        })
      },
      addImageFunc (image) {
        console.log('元素图片：', image)
        this.touchKit.add({
          image: image,
          width: '100',
          use: 'all'
        })
      },
      exportImageFunc: (image) => {
        console.log('生成图片：', image)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
  #touchkit {
    width: 100%;
    height: 100%;
  }
</style>
